<!DOCTYPE HTML>
<html>
<head>
  <title>bpmn-js url viewer demo</title>

  <style type="text/css">
    html, body, #canvas {
      height: 100%;
      padding: 0;
    }

    .diagram-note {
      background-color: rgba(66, 180, 21, 0.7);
      color: White;
      border-radius: 5px;
      font-family: Arial;
      font-size: 12px;
      padding: 5px;
      min-height: 16px;
      width: 50px;
      text-align: center;
    }

    .needs-discussion:not(.djs-connection) .djs-visual > :nth-child(1) {
      stroke: rgba(66, 180, 21, 0.7) !important; /* color elements as red */
    }
  </style>
</head>
<body>
	<div id="canvas" style="width:100%;height:100%;"></div>
  <!-- demo dependencies -->
  <script src="libs/jquery/dist/jquery.js"></script>

  <!-- viewer -->
  <script src="libs/bpmn-js/dist/bpmn-viewer.js"></script>

  <!-- app -->

  <script>
var BpmnViewer = window.BpmnJS;
// create viewer
var bpmnViewer = new BpmnViewer({   container: '#canvas'  });


//给bpmn添加点击事件
bpmnViewer.on('element.click', function(event) {
  var element = event.element;
  console.log(element.id);
  console.log(element);
});
  // import function
  function importXML(xml) {

    // import diagram
    bpmnViewer.importXML(xml, function(err) {

      if (err) {
        return console.error('could not import BPMN 2.0 diagram', err);
      }

      var canvas = bpmnViewer.get('canvas');
      var overlays = bpmnViewer.get('overlays');


      // zoom to fit full viewport
      canvas.zoom('fit-viewport');

      // attach an overlay to a node
      /*
	  overlays.add('ExclusiveGateway_0kiokv2', 'note', {
        position: {
          bottom: 0,
          right: 0
        },
        html: '<div class="diagram-note">Mixed up the labels?</div>'
      });
	  */

      // add marker
      canvas.addMarker('Task_09j6i96', 'needs-discussion');
    });
  }
  
$(function(){
	$.post("wenti.bpmn",function(data,status){
		importXML(data);
		
	},"text");
});  
  </script>
</html>
